// menu.js
Page({
  data: {
    activeCategory: 0,
    scrollIntoView: 'category0',
    categories: [
      { id: 0, name: "人气TOP" },
      { id: 1, name: "奶茶系列" },
      { id: 2, name: "果茶系列" },
      { id: 3, name: "芝士系列" },
      { id: 4, name: "小吃系列" },
      { id: 5, name: "甜品系列" }
    ],
    products: [
      {
        categoryId: 0,
        items: [
          { id: 1, name: '招牌奶茶', price: 18, imageUrl: '/images/products/product1.jpg', sales: 232, desc: '招牌奶茶，香浓顺滑' },
          { id: 2, name: '芝芝芒果', price: 22, imageUrl: '/images/products/product2.jpg', sales: 188, desc: '芒果与芝士的完美结合' },
          { id: 3, name: '多肉葡萄', price: 20, imageUrl: '/images/products/product3.jpg', sales: 120, desc: '多肉与葡萄的清爽之选' },
          { id: 4, name: '烤奶', price: 19, imageUrl: '/images/products/product4.jpg', sales: 166, desc: '香浓烤奶，浓郁香醇' }
        ]
      },
      {
        categoryId: 1,
        items: [
          { id: 1, name: '招牌奶茶', price: 18, imageUrl: '/images/products/product1.jpg', sales: 232, desc: '招牌奶茶，香浓顺滑' },
          { id: 7, name: '红豆奶茶', price: 18, imageUrl: '/images/products/product7.jpg', sales: 92, desc: '醇香奶茶搭配香甜红豆' },
          { id: 8, name: '珍珠奶茶', price: 17, imageUrl: '/images/products/product8.jpg', sales: 122, desc: '嚼劲十足的珍珠与奶茶的经典搭配' },
          { id: 9, name: '燕麦奶茶', price: 19, imageUrl: '/images/products/product6.jpg', sales: 56, desc: '健康燕麦与奶茶的创新结合' }
        ]
      },
      {
        categoryId: 2,
        items: [
          { id: 10, name: '满杯百香果', price: 20, imageUrl: '/images/products/product10.jpg', sales: 78, desc: '酸甜百香果，清爽怡人' },
          { id: 11, name: '柠檬绿茶', price: 16, imageUrl: '/images/products/product11.jpg', sales: 89, desc: '新鲜柠檬片泡制，酸甜可口' },
          { id: 12, name: '蜜桃乌龙', price: 19, imageUrl: '/images/products/product12.jpg', sales: 65, desc: '桃香与乌龙的完美融合' }
        ]
      },
      {
        categoryId: 3,
        items: [
          { id: 2, name: '芝芝芒果', price: 22, imageUrl: '/images/products/product2.jpg', sales: 188, desc: '芒果与芝士的完美结合' },
          { id: 13, name: '芝芝草莓', price: 23, imageUrl: '/images/products/product13.jpg', sales: 122, desc: '草莓搭配芝士，酸甜美味' },
          { id: 14, name: '芝芝桃桃', price: 22, imageUrl: '/images/products/product14.jpg', sales: 98, desc: '香甜水蜜桃与芝士的碰撞' }
        ]
      },
      {
        categoryId: 4,
        items: [
          { id: 15, name: '盐酥鸡', price: 15, imageUrl: '/images/products/product15.jpg', sales: 56, desc: '外酥里嫩，香气扑鼻' },
          { id: 16, name: '薯条', price: 12, imageUrl: '/images/products/product16.jpg', sales: 78, desc: '外脆里嫩，美味可口' },
          { id: 17, name: '鸡米花', price: 14, imageUrl: '/images/products/product17.jpg', sales: 45, desc: '外酥里嫩，一口一个' }
        ]
      },
      {
        categoryId: 5,
        items: [
          { id: 5, name: '草莓波波', price: 23, imageUrl: '/images/products/product5.jpg', sales: 76, desc: '新鲜草莓搭配Q弹波波', tag: '新品' },
          { id: 18, name: '桂花乌龙', price: 21, imageUrl: '/images/products/product18.jpg', sales: 34, desc: '桂花香与乌龙的美妙结合', tag: '新品' }
        ]
      }
    ],
    cartCount: 0, // 购物车商品总数
    searchValue: '', // 搜索关键词
    categoryTops: [], // 存储每个分类的顶部位置
    categoryRectRetryCount: 0,
    rightScrollTop: 0, // 右侧滚动区域的滚动位置
    isSwitchingCategory: false, // 是否由点击左侧分类触发的滚动
    hasCalculatedCategoryTops: false, // 标记是否已经计算过分类高度
  },

  onLoad() {
    // 获取购物车数量
    this.getCartCount();
  },

  onReady() {
    // 获取各分类区块的位置信息
    this.getCategoryRects();
  },

  onShow() {
    // 每次页面显示时更新购物车数量
    this.getCartCount();
    // 页面显示时，如果分类节点信息还未获取，则尝试获取
    if (!this.data.hasCalculatedCategoryTops) {
      this.getCategoryRects();
    }
  },

  // 获取各分类区块的顶部位置
  getCategoryRects() {
    // 如果已经计算过，则不再重复计算
    if (this.data.hasCalculatedCategoryTops && this.data.categoryTops.length > 0) {
      return;
    }

    const query = wx.createSelectorQuery();
    const categoryTops = [];

    // 需要稍微延迟一下，确保页面渲染完成
    setTimeout(() => {
      query.selectAll('.category-title').boundingClientRect(rects => {
        if (rects && rects.length > 0) {
          rects.forEach(rect => {
            // id 的形式是 'categoryX'
            const categoryId = parseInt(rect.id.replace('category', ''), 10);
            categoryTops.push({
              id: categoryId,
              top: rect.top // 这个top是相对于视窗的，我们需要转换
            });
          });

          // 获取 product-list 组件本身的信息，用于计算相对 top
          query.select('.product-list').boundingClientRect(scrollRect => {
            if (scrollRect && scrollRect.top !== undefined) {
              const relativeTops = categoryTops.map(item => ({
                id: item.id,
                top: item.top - scrollRect.top // 减去product-list的top，得到相对于product-list的top
              }));

              // 设置数据
              this.setData({
                categoryTops: relativeTops,
                hasCalculatedCategoryTops: true // 标记已经计算过
              });

              // 移除console.log，减少不必要的日志输出
            } else {
              // 尝试再次获取，但不要频繁重试
              if (!this.data.hasCalculatedCategoryTops && this.data.categoryTops.length === 0) {
                // 使用setTimeout而不是立即重试，给页面渲染更多时间
                this.rectRetryTimer && clearTimeout(this.rectRetryTimer);
                this.rectRetryTimer = setTimeout(() => this.getCategoryRects(), 300);
              }
            }
          }).exec();
        } else {
          // 如果第一次获取不到，可能是因为 DOM 还没完全准备好，稍后重试
          if (!this.data.hasCalculatedCategoryTops && this.data.categoryTops.length === 0) {
            // 增加重试间隔，减少频繁调用
            this.rectRetryTimer && clearTimeout(this.rectRetryTimer);
            this.rectRetryTimer = setTimeout(() => this.getCategoryRects(), 300);
          }
        }
      }).exec();
    }, 200); // 增加延迟时间，确保 WXML 完全渲染完成
  },

  // 获取购物车商品数量
  getCartCount() {
    // 从本地存储获取购物车数据
    const cartList = wx.getStorageSync('cartList') || [];

    // 计算商品总数
    let count = 0;
    if (cartList && cartList.length > 0) {
      cartList.forEach(item => {
        if (item && typeof item.quantity === 'number') {
          count += item.quantity;
        }
      });
    }

    this.setData({
      cartCount: count
    });
  },

  // 点击分类切换
  switchCategory(e) {
    const id = e.currentTarget.dataset.id;
    if (id === this.data.activeCategory && this.data.isSwitchingCategory) return;

    this.setData({
      activeCategory: id,
      scrollIntoView: `category${id}`,
      isSwitchingCategory: true // 标记为左侧点击触发
    });
    // 左侧点击后，短时间内右侧滚动不触发左侧的更新
    // 清除标记，以便后续滚动可以正常联动
    if (this.switchCategoryTimer) clearTimeout(this.switchCategoryTimer);
    this.switchCategoryTimer = setTimeout(() => {
      this.setData({ isSwitchingCategory: false });
    }, 500); // 500ms 内的滚动不反向影响左侧
  },

  // 监听滚动区域滚动事件，实现分类自动联动
  handleScroll(e) {
    const { scrollTop } = e.detail;

    // 不需要每次滚动都更新rightScrollTop到data中，只在需要使用时记录即可
    // this.setData({ rightScrollTop: scrollTop }); - 移除这行，减少setData调用
    this._rightScrollTop = scrollTop; // 使用实例变量而非data存储当前滚动位置

    if (this.data.isSwitchingCategory) {
      // 如果是点击左侧分类触发的滚动，则不进行处理
      return;
    }

    // 使用节流，优化性能
    if (this.scrollTimer) {
      clearTimeout(this.scrollTimer);
    }

    // 增加节流时间，减少计算频率
    this.scrollTimer = setTimeout(() => {
      const { categoryTops, activeCategory } = this.data;
      if (categoryTops.length === 0) return;

      // 直接从后往前遍历找到第一个满足条件的分类
      // 这样更高效，并避免不必要的循环
      let finalCurrentCategory = activeCategory;
      for (let i = categoryTops.length - 1; i >= 0; i--) {
        if (scrollTop >= categoryTops[i].top - 20) { // 减去一个小的偏移量，比如20px
          finalCurrentCategory = categoryTops[i].id;
          break;
        }
      }

      if (finalCurrentCategory !== activeCategory) {
        // 只有真正需要切换时才调用setData
        this.setData({ activeCategory: finalCurrentCategory });
        // 移除console.log，减少日志输出
      }
    }, 150); // 增加节流时间，从100ms到150ms
  },

  // 搜索商品
  onSearch(e) {
    const value = e.detail.value;
    this.setData({
      searchValue: value
    });
    // 实际项目中应该调用搜索接口
    wx.showToast({
      title: '搜索功能开发中',
      icon: 'none'
    });
  },

  // 清空搜索框
  clearSearch() {
    this.setData({
      searchValue: ''
    });
  },

  // 跳转到商品详情页
  toDetail(e) {
    const id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: `/pages/detail/detail?id=${id}`
    });
  },

  // 添加到购物车
  addToCart(e) {
    try {
      const { id, name, price, imageurl } = e.currentTarget.dataset;
      const image = imageurl || '/images/products/default.jpg';

      // 构建商品信息
      const productInfo = {
        id: parseInt(id),
        name: name || '',
        price: parseFloat(price) || 0,
        image: image,
        // 添加其他必要属性
        size: { id: 1, name: '常规', price: 0 },
        sugar: { id: 1, name: '正常糖' },
        ice: { id: 1, name: '正常冰' },
        addon: [],
        quantity: 1,
        itemTotal: parseFloat(price) || 0
      };

      // 从本地存储获取购物车数据
      let cartList = wx.getStorageSync('cartList') || [];
      let found = false;

      // 查找购物车中是否已有该商品
      if (cartList && cartList.length > 0) {
        for (let i = 0; i < cartList.length; i++) {
          if (cartList[i] && cartList[i].id === parseInt(id)) {
            found = true;
            cartList[i].quantity = (cartList[i].quantity || 0) + 1;
            cartList[i].itemTotal = cartList[i].quantity * parseFloat(price || 0);
            break;
          }
        }
      }

      // 如果购物车中没有该商品，则添加
      if (!found) {
        cartList.push(productInfo);
      }

      // 先保存到本地存储，确保数据不丢失
      wx.setStorageSync('cartList', cartList);

      // 显示加载提示
      wx.showLoading({
        title: '添加中...',
        mask: true
      });

      // 尝试更新到云端
      wx.cloud.callFunction({
        name: 'updateCart',
        data: {
          items: cartList
        }
      })
        .then(res => {
          wx.hideLoading();
          console.log('云端更新成功:', res);

          wx.showToast({
            title: '已加入购物车',
            icon: 'success'
          });

          // 更新购物车数量
          this.getCartCount();
        })
        .catch(err => {
          wx.hideLoading();
          console.error('云端更新失败:', err);

          // 即使云端更新失败，本地已保存，仍显示成功
          wx.showToast({
            title: '已加入购物车',
            icon: 'success'
          });

          // 更新购物车数量
          this.getCartCount();
        });
    } catch (error) {
      console.error('添加到购物车出错:', error);
      wx.hideLoading();

      wx.showToast({
        title: '添加失败，请重试',
        icon: 'none'
      });
    }
  },

  // 跳转到购物车页面
  toCart() {
    wx.switchTab({
      url: '/pages/cart/cart'
    });
  },

  onUnload() {
    // 页面卸载时清除定时器
    if (this.scrollTimer) clearTimeout(this.scrollTimer);
    if (this.switchCategoryTimer) clearTimeout(this.switchCategoryTimer);
    if (this.rectRetryTimer) clearTimeout(this.rectRetryTimer);
  },

  // 停止事件冒泡
  stopPropagation: function (e) {
    // 用于阻止点击事件冒泡
  }
}) 